<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

  <head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="../gulimall/product/item/scss/shop.css"/>
    <link rel="stylesheet" type="text/css" href="../gulimall/product/item/scss/jd.css"/>
    <link rel="stylesheet" href="../gulimall/product/item/scss/header.css"/>
    <link rel="stylesheet" type="text/css" href="../gulimall/product/item/bootstrap/css/bootstrap.css"/>
  </head>

  <body>
    <div id="max">
      <!--头部-->
      <header>
        <!--品牌官方网站-->
        <div class="min">
          <ul class="header_ul_left">
            <li class="glyphicon glyphicon-home"><a href="http://localhost/shop-vue" class="aa"> 谷粒首页</a></li>
            <li class="glyphicon glyphicon-map-marker"><a href="../gulimall/product/item/javascript:;"> 无锡</a>
              <ol id="beijing">
                <li style="background: red;"><a href="../gulimall/product/item/javascript:;" style="color: white;"> 无锡</a>
                </li>
                <li><a href="../gulimall/product/item/javascript:;">上海</a></li>
                <li><a href="../gulimall/product/item/javascript:;">天津</a></li>
                <li><a href="../gulimall/product/item/javascript:;">重庆</a></li>
                <li><a href="../gulimall/product/item/javascript:;">河北</a></li>
                <li><a href="../gulimall/product/item/javascript:;">山西</a></li>
                <li><a href="../gulimall/product/item/javascript:;">河南</a></li>
                <li><a href="../gulimall/product/item/javascript:;">辽宁</a></li>
                <li><a href="../gulimall/product/item/javascript:;">吉林</a></li>
                <li><a href="../gulimall/product/item/javascript:;">黑龙江</a></li>
                <li><a href="../gulimall/product/item/javascript:;">内蒙古</a></li>
                <li><a href="../gulimall/product/item/javascript:;">江苏</a></li>
                <li><a href="../gulimall/product/item/javascript:;">山东</a></li>
                <li><a href="../gulimall/product/item/javascript:;">安徽</a></li>
                <li><a href="../gulimall/product/item/javascript:;">浙江</a></li>
                <li><a href="../gulimall/product/item/javascript:;">福建</a></li>
                <li><a href="../gulimall/product/item/javascript:;">湖北</a></li>
                <li><a href="../gulimall/product/item/javascript:;">湖南</a></li>
                <li><a href="../gulimall/product/item/javascript:;">广东</a></li>
                <li><a href="../gulimall/product/item/javascript:;">广西</a></li>
                <li><a href="../gulimall/product/item/javascript:;">江西</a></li>
                <li><a href="../gulimall/product/item/javascript:;">四川</a></li>
                <li><a href="../gulimall/product/item/javascript:;">海南</a></li>
                <li><a href="../gulimall/product/item/javascript:;">贵州</a></li>
                <li><a href="../gulimall/product/item/javascript:;">云南</a></li>
                <li><a href="../gulimall/product/item/javascript:;">西藏</a></li>
                <li><a href="../gulimall/product/item/javascript:;">陕西</a></li>
                <li><a href="../gulimall/product/item/javascript:;">甘肃</a></li>
                <li><a href="../gulimall/product/item/javascript:;">青海</a></li>
                <li><a href="../gulimall/product/item/javascript:;">宁夏</a></li>
                <li><a href="../gulimall/product/item/javascript:;">新疆</a></li>
                <li><a href="../gulimall/product/item/javascript:;">港澳</a></li>
                <li><a href="../gulimall/product/item/javascript:;">台湾</a></li>
                <li><a href="../gulimall/product/item/javascript:;">钓鱼岛</a></li>
                <li><a href="../gulimall/product/item/javascript:;">海外</a></li>
              </ol>
            </li>
          </ul>
          `
          <ul class="header_ul_right">
            <li style="border: 0;">
              <a th:if="${session.loginUser == null}" href="http://localhost/auth/login.html" class="aa">您好，请登录</a>
              <a th:if="${session.loginUser != null}" class="aa">欢迎您, [[${session.loginUser.nickname}]]</a>
            </li>
            <li>
              <a th:if="${session.loginUser == null}" href="http://localhost/auth/reg.html"
                 style="color: red;">免费注册</a>
            </li>
            <li><a href="http://member.gulimall.com/memberOrder.html" class="aa">我的订单</a> |</li>
            <li class="jingdong"><a href="../gulimall/product/item/javascript:;">我的谷粒</a><span
              class="glyphicon glyphicon-menu-down">|</span>
              <ol class="jingdong_ol">
                <li><a href="../gulimall/product/item/javascript:;">待处理订单</a></li>
                <li><a href="../gulimall/product/item/javascript:;">消息</a></li>
                <li><a href="../gulimall/product/item/javascript:;">返修退换货</a></li>
                <li><a href="../gulimall/product/item/javascript:;">我的回答</a></li>
                <li><a href="../gulimall/product/item/javascript:;">降价商品</a></li>
                <li><a href="../gulimall/product/item/javascript:;">我的关注</a></li>
                <li style="width: 100%;height: 1px;background: lavender;margin-top: 15px;"></li>
                <li style="margin-top: 0;"><a href="../gulimall/product/item/javascript:;">我的京豆</a></li>
                <li style="margin-top: 0;"><a href="../gulimall/product/item/javascript:;">我的优惠券</a></li>
                <li style="margin-bottom: 10px;"><a href="../gulimall/product/item/javascript:;">我的白条</a></li>

              </ol>
            </li>

            <li><a href="../gulimall/product/item/javascript:;" class="aa">谷粒会员</a> |</li>
            <li><a href="../gulimall/product/item/javascript:;" class="aa">企业采购</a> |</li>
            <li class="fuwu"><a href="../gulimall/product/item/javascript:;">客户服务</a><span
              class="glyphicon glyphicon-menu-down"></span> |
              <ol class="fuwu_ol">
                <h6>客户</h6>
                <li><a href="../gulimall/product/item/javascript:;">帮助中心</a></li>
                <li><a href="../gulimall/product/item/javascript:;">售后服务</a></li>
                <li><a href="../gulimall/product/item/javascript:;">在线客服</a></li>
                <li><a href="../gulimall/product/item/javascript:;">意见建议</a></li>
                <li><a href="../gulimall/product/item/javascript:;">电话客服</a></li>
                <li><a href="../gulimall/product/item/javascript:;">客服邮箱</a></li>
                <li style="margin-bottom: -5px;"><a href="../gulimall/product/item/javascript:;">金融咨询</a></li>
                <li style="margin-bottom: -5px;"><a href="../gulimall/product/item/javascript:;">售全球客服</a></li>
                <h6 style="border-top: 1px dashed darkgray;height: 30px;line-height: 30px;">商户</h6>
                <li style="margin-top: -5px;"><a href="../gulimall/product/item/javascript:;">合作招商</a></li>
                <li style="margin-top: -5px;"><a href="../gulimall/product/item/javascript:;">学习中心</a></li>
                <li><a href="../gulimall/product/item/javascript:;">商家后台</a></li>
                <li><a href="../gulimall/product/item/javascript:;">京麦工作台</a></li>
                <li><a href="../gulimall/product/item/javascript:;">商家帮助</a></li>
                <li><a href="../gulimall/product/item/javascript:;">规则平台</a></li>
              </ol>
            </li>
            <li class="daohang">
              <a href="../gulimall/product/item/javascript:;">网站导航</a>
              <span class="glyphicon glyphicon-menu-down"></span> |
              <ol class="daohang_ol">
                <li style="width: 34%;">
                  <h5>特色主题</h5>
                  <p>
                    <a href="../gulimall/product/item/javascript:;">谷粒试用</a>
                    <a href="../gulimall/product/item/javascript:;">谷粒金融</a>
                    <a href="../gulimall/product/item/javascript:;">全球售</a>
                    <a href="../gulimall/product/item/javascript:;">国际站</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;">谷粒会员</a>
                    <a href="../gulimall/product/item/javascript:;">谷粒预售</a>
                    <a href="../gulimall/product/item/javascript:;">买什么</a>
                    <a href="../gulimall/product/item/javascript:;">俄语站</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;">装机大师</a>
                    <a href="../gulimall/product/item/javascript:;">0元评测</a>
                    <a href="../gulimall/product/item/javascript:;">定期送</a>
                    <a href="../gulimall/product/item/javascript:;">港澳售</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;">优惠券</a>
                    <a href="../gulimall/product/item/javascript:;">秒杀</a>
                    <a href="../gulimall/product/item/javascript:;">闪购</a>
                    <a href="../gulimall/product/item/javascript:;">印尼站</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;">谷粒金融科技</a>
                    <a href="../gulimall/product/item/javascript:;">In货推荐</a>
                    <a href="../gulimall/product/item/javascript:;">陪伴计划</a>
                    <a href="../gulimall/product/item/javascript:;">出海招商</a>
                  </p>
                </li>
                <li>
                  <h5>行业频道</h5>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">手机</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">智能数码</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">玩3C</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">电脑办公</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">家用电器</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒智能</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">服装城</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">美妆馆</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">家装城</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">母婴</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">食品</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">运动户外</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">农资频道</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">整车</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">图书</a>
                  </p>
                </li>
                <li>
                  <h5>生活服务</h5>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒众筹</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">白条</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒金融APP</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒小金库</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">理财</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">智能家电</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">话费</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">水电煤</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">彩票</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">旅行</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">机票酒店</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">电影票</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒到家</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒众测</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">游戏</a>
                  </p>
                </li>
                <li style="border: 0;">
                  <h5>更多精选</h5>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">合作招商</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒通信</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒E卡</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">企业采购</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">服务市场</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">办公生活馆</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">乡村招募</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">校园加盟</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">京友邦</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">谷粒社区</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">智能社区</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">游戏社区</a>
                  </p>
                  <p>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2">知识产权维权</a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2"></a>
                    <a href="../gulimall/product/item/javascript:;" class="aa_2"></a>
                  </p>
                </li>
              </ol>
            </li>
            <li class="sjjd" style="border: 0;"><a href="../gulimall/product/item/javascript:;" class="aa">手机谷粒</a>
              <div class="er">
                <div class="er_1">
                  <div class="er_1_1">
                    <h6><a href="../gulimall/product/item/#">手机谷粒</a></h6>
                    <p>新人专享大礼包</p>

                  </div>
                </div>
                <div class="er_1">
                  <div class="er_1_1">
                    <h6><a href="../gulimall/product/item/#">关注谷粒微信</a></h6>
                    <p>微信扫一扫关注新粉最高180元惊喜礼包</p>
                  </div>
                </div>
                <!--我的理财-->
                <div class="er_1" style="border: 0;">
                  <img src="../gulimall/product/item/img/5874a555Ne8192324.jpg"/>
                  <div class="er_1_1">
                    <h6><a href="../gulimall/product/item/#">谷粒金融客户端</a></h6>
                    <p>新人专享大礼包</p>
                    <div><a href="../gulimall/product/item/#"><img src="../gulimall/product/item/img/11.png"/></a><a
                      href="../gulimall/product/item/#"><img src="../gulimall/product/item/img/22.png"/></a></div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </header>
      <!--导航-->
      <nav>
        <div class="nav_min">
          <div class="nav_top">
            <div class="nav_top_one"><a href="http://localhost/shop-vue"><img
              src="../gulimall/product/item/img/logo1.jpg"/></a></div>
            <div class="nav_top_two"><input type="text"/>
              <button>搜索</button>
            </div>
            <div class="nav_top_three"><a href="http://localhost/cart/cart.html">我的购物车</a><span
              class="glyphicon glyphicon-shopping-cart"></span>
              <div class="nav_top_three_1">
                <img src="../gulimall/product/item/img/44.png"/>购物车还没有商品，赶紧选购吧！
              </div>
            </div>
          </div>
          <div class="nav_down">
            <ul class="nav_down_ul">
              <li class="nav_down_ul_1" style="width: 24%;float: left;"><a
                href="../gulimall/product/item/javascript:;">全部商品分类</a>

              </li>
              <li class="ul_li"><a href="../gulimall/product/item/javascript:;">服装城</a></li>
              <li class="ul_li"><a href="../gulimall/product/item/javascript:;">美妆馆</a></li>
              <li class="ul_li"><a href="../gulimall/product/item/javascript:;">超市</a></li>
              <li class="ul_li" style="border-right: 1px solid lavender;"><a
                href="../gulimall/product/item/javascript:;">生鲜</a></li>
              <li class="ul_li"><a href="../gulimall/product/item/javascript:;">全球购</a></li>
              <li class="ul_li"><a href="../gulimall/product/item/javascript:;">闪购</a></li>
              <li class="ul_li" style="border-right: 1px solid lavender;"><a
                href="../gulimall/product/item/javascript:;">拍卖</a></li>
              <li class="ul_li"><a href="../gulimall/product/item/javascript:;">金融</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

    <div class="crumb-wrap">
      <div class="w">
        <div class="crumb">
          <div class="crumb-item">
            <a href="../gulimall/product/item/">手机</a>
          </div>
          <div class="crumb-item sep">></div>
          <div class="crumb-item">
            <a href="../gulimall/product/item/">手机通讯</a>
          </div>
          <div class="crumb-item sep">></div>
          <div class="crumb-item">
            <a href="../gulimall/product/item/">手机</a>
          </div>
          <div class="crumb-item sep">></div>
          <div class="crumb-item">
            <div class="crumb-item-one">
              华为 (HUAWEI)
              <img src="../gulimall/product/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img"/>
              <div class="crumb-item-two ">
                <div class="crumb-item-con clear">
                  <ul class="con-ul">
                    <li>
                      <img src="../gulimall/product/item/img/5825a5a6Nde8ecb75.jpg" alt=""/>
                    </li>
                    <li>
                      <p>
                        荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
                      </p>
                      <p>
                        ￥1099.00
                      </p>
                    </li>
                  </ul>
                  <ul class="con-ul">
                    <li>
                      <img src="../gulimall/product/item/img/5919637aN271a1301.jpg" alt=""/>
                    </li>
                    <li>
                      <p>
                        荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
                      </p>
                      <p>
                        ￥1099.00
                      </p>
                    </li>
                  </ul>
                  <ul class="con-ul">
                    <li>
                      <img src="../gulimall/product/item/img/599a806bN9d829c1c.jpg" alt=""/>
                    </li>
                    <li>
                      <p>
                        荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
                      </p>
                      <p>
                        ￥1099.00
                      </p>
                    </li>
                  </ul>
                </div>
                <div class="crumb-item-cons clear">
                  <ul>
                    <li>华为(huawei)</li>
                    <li>小米(xiaomi)</li>
                    <li>APPle</li>
                    <li>魅族(meizu)</li>
                    <li>锤子</li>

                  </ul>
                  <ul>
                    <li>三星</li>
                    <li>vivo</li>
                    <li>飞利浦</li>
                    <li>360</li>
                    <li>更多>></li>

                  </ul>
                </div>
              </div>

            </div>

          </div>
          <div class="crumb-item sep">></div>
          <div class="crumb-item">
            华为Mate 10
          </div>
        </div>

        <div class="contact">
          <ul class="contact-ul">
            <li>
              <a href="../gulimall/product/item/#">
                华为自营官方旗舰店
              </a>

              <span class="contact-sp">
              <span class="contact-sp1">
                JD
              </span>
              <span class="contact-sp2">
                自营
              </span>
            </span>
            </li>
            <li>
              <a href="../gulimall/product/item/#">
                <img src="../gulimall/product/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt=""/> 联系供应商
              </a>
            </li>
            <li>
              <a href="../gulimall/product/item/#">
                <img src="../gulimall/product/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt=""/> JIMI
              </a>
            </li>
            <li>
              <a href="../gulimall/product/item/#">
                <img src="../gulimall/product/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt=""/> 关注店铺
              </a>
            </li>
          </ul>
          <div class="contact-one">
            <ul>
              <li>客服</li>
              <li><img src="../gulimall/product/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt=""/>留言</li>
              <li><img src="../gulimall/product/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt=""/>JIMI智能</li>
              <li>
                <img src="../gulimall/product/item/img/1466134037230.jpg" class="contact-img"/>
                <p>手机下单</p>
              </li>

            </ul>
            <div class="contact-two">
              <span><img src="../gulimall/product/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt=""/>进店逛逛</span>
              <span><img src="../gulimall/product/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt=""/>关注店铺</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="Shop">
      <div class="box">
        <div class="box-one ">
          <div class="boxx">

            <div class="imgbox">
              <div class="probox">
                <img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
                <div class="hoverbox"></div>
              </div>
              <div class="showbox">
                <img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
              </div>
            </div>

            <div class="box-lh">

              <div class="box-lh-one">
                <ul>
                  <li th:each="img : ${item.images}"><img th:src="${img.imgUrl}"/></li>
                </ul>
              </div>
              <div id="left">
                <
              </div>
              <div id="right">
                >
              </div>

            </div>

            <div class="boxx-one">
              <ul>
                <li>
                  <span>
                    <img src="../gulimall/product/item/img/b769782fe4ecca40913ad375a71cb92d.png" alt=""/>关注
                  </span>
                  <span>
                    <img src="../gulimall/product/item/img/9224fcea62bfff479a6712ba3a6b47cc.png" alt=""/>
                    对比
                  </span>
                </li>
                <li>

                </li>
              </ul>
            </div>

          </div>
          <div class="box-two">
            <div class="box-name" th:text="${item.info.skuTitle}">
              华为 HUAWEI Mate 10 6GB+128GB 亮黑色 移动联通电信4G手机 双卡双待
            </div>
            <div class="box-hide" th:text="${item.info.skuSubtitle}">预订用户预计11月30日左右陆续发货！麒麟970芯片！AI智能拍照！
              <a href="../gulimall/product/item/"><u></u></a>
            </div>
            <div class="box-yuyue">
              <div class="yuyue-one">
                <img src="../gulimall/product/item/img/7270ffc3baecdd448958f9f5e69cf60f.png" alt=""/> 预约抢购
              </div>
              <div class="yuyue-two">
                <ul>
                  <li>
                    <img src="../gulimall/product/item/img/f64963b63d6e5849977ddd6afddc1db5.png"/>
                    <span>190103</span> 人预约
                  </li>
                  <li>
                    <img src="../gulimall/product/item/img/36860afb69afa241beeb33ae86678093.png"/> 预约剩余
                    <span id="timer">

                    </span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="box-summary clear">
              <ul>
                <li>谷粒价</li>
                <li>
                  <span>￥</span>
                  <span th:text="${#numbers.formatDecimal(item.info.price,3,2)}">4499.00</span>
                </li>
                <li style="color: red" th:if="${item.seckillSkuVo != null}">

                  <span th:if="${#dates.createNow().getTime() < item.seckillSkuVo.startTime}">
                    商品将会在[[${#dates.format(new java.util.Date(item.seckillSkuVo.startTime),"yyyy-MM-dd HH:mm:ss")}]]进行秒杀
                  </span>

                  <span
                    th:if="${#dates.createNow().getTime() >= item.seckillSkuVo.startTime && #dates.createNow().getTime() <= item.seckillSkuVo.endTime}">
                    秒杀价 [[${#numbers.formatDecimal(item.seckillSkuVo.seckillPrice,1,2)}]]
                  </span>

                </li>
                <li>
                  <a href="../gulimall/product/item/">
                    预约说明
                  </a>
                </li>
              </ul>
            </div>
            <div class="box-wrap clear">
              <div class="box-wrap-one clear">
                <ul>
                  <li>增值业务</li>
                  <li><img src="../gulimall/product/item/img/90a6fa41d0d46b4fb0ff6907ca17c478.png"/></li>
                  <li><img src="../gulimall/product/item/img/2e19336b961586468ef36dc9f7199d4f.png"/></li>
                  <li><img src="../gulimall/product/item/img/1f80c3d6fabfd3418e54b005312c00b5.png"/></li>
                </ul>
              </div>
            </div>

            <div class="box-stock">
              <ul class="box-ul">
                <li>配送至</li>
                <li class="box-stock-li">
                  <div class="box-stock-one">
                    北京朝阳区管庄
                    <img src="../gulimall/product/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img"/>
                  </div>
                  <div class="box-stock-two">
                    <dl>
                      <dt>
                        <a>选择新地址</a>
                        <img src="../gulimall/product/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt=""
                             class="box-stock-two-img"/>
                      </dt>
                      <dd>
                        <div class="box-stock-dd">
                          <div class="box-stock-top">
                            <div class="box-stock-div">北京</div>
                            <div class="box-stock-div">朝阳区</div>
                            <div class="box-stock-div">管庄</div>
                          </div>
                          <div class="box-stock-fot">
                            <div class="box-stock-con" style="display: block;">
                              <ul>
                                <li>北京</li>
                                <li>上海</li>
                                <li>天津</li>
                                <li>重庆</li>
                              </ul>
                            </div>
                            <div class="box-stock-con">
                              <ul>
                                <li>朝阳区</li>
                                <li>海淀区</li>
                                <li>东城区</li>
                                <li>西城区</li>
                              </ul>
                            </div>
                            <div class="box-stock-con">
                              <ul>
                                <li>4环到5环之内</li>
                                <li>管庄</li>
                                <li>北苑</li>
                              </ul>
                            </div>

                          </div>
                        </div>
                      </dd>
                    </dl>

                  </div>

                </li>
                <li>
                  <span th:text="${item.hasStock?'有货':'无货'}">无货</span>， 此商品暂时售完
                </li>
              </ul>
            </div>
            <div class="box-supply">
              <ul class="box-ul">
                <li></li>
                <li>
                  由<span>谷粒</span> 发货，并提供售后服务
                </li>
              </ul>
            </div>
            <div class="box-attr-3">
              <div class="box-attr clear" th:each="attr : ${item.saleAttr}">
                <dl>
                  <dt>选择[[${attr.attrName}]]</dt>
                  <dd th:each="val : ${attr.attrValues}">
                    <a th:attr=" class=${#lists.contains(#strings.listSplit(val.skuIds,','),item.info.skuId.toString())
                                   ? 'sku_attr_value checked': 'sku_attr_value'}, skus=${val.skuIds} ">
                      [[${val.attrValue}]]
                      <!--											<img src="../gulimall/product/item/img/59ddfcb1Nc3edb8f1.jpg" /> -->
                    </a>
                  </dd>
                </dl>
              </div>

            </div>

            <div class="box-btns clear">
              <div class="box-btns-one">
                <input type="text" name="" id="productNum" value="1"/>
                <div class="box-btns-one1">

                  <div>
                    <button id="jia">
                      +
                    </button>
                  </div>
                  <div>
                    <button id="jian">
                      -
                    </button>
                  </div>

                </div>
              </div>

              <div class="box-btns-two" th:if="${item.seckillSkuVo == null }">
                <a class="addToCart" href="#" th:attr="skuId=${item.info.skuId}">
                  加入购物车
                </a>
              </div>

              <div class="box-btns-two"
                   th:if="${item.seckillSkuVo != null && (#dates.createNow().getTime() >= item.seckillSkuVo.startTime && #dates.createNow().getTime() <= item.seckillSkuVo.endTime)}">
                <a class="seckill" href="#"
                   th:attr="skuId=${item.info.skuId},sessionId=${item.seckillSkuVo.promotionSessionId},code=${item.seckillSkuVo.randomCode}">
                  立即抢购
                </a>
              </div>

              <div class="box-btns-three">
                <img src="../gulimall/product/item/img/e4ed3606843f664591ff1f68f7fda12d.png" alt=""/> 分享
              </div>
            </div>

            <div class="box-footer-zo">
              <div class="box-footer clear">
                <dl>
                  <dt>本地活动</dt>
                  <dd>
                    <a href="../gulimall/product/item/">
                      ·1元500MB激活到账30元 >>
                    </a>
                  </dd>
                </dl>
              </div>

              <div class="box-footer">
                <dl>
                  <dt>温馨提示</dt>
                  <dd>·本商品不能使用 东券 京券</dd>
                  <dd>·请完成预约后及时抢购！</dd>
                </dl>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!--欲约抢购流程-->
      <div class="qianggoulioucheng">
        <div class="lioucheng">
          <h3>欲约抢购流程</h3>
        </div>
        <!--抢购步骤-->
        <ul class="qianggoubuzhao">
          <li>
            <img src="../gulimall/product/item/img/shop_03.png"/>
            <dl class="buzhou">
              <dt>1.等待预约</dt>
              <dl>预约即将开始</dl>
            </dl>
          </li>
          <li>
            <img src="../gulimall/product/item/img/shop_04.png"/>
            <dl class="buzhou">
              <dt>2.预约中</dt>
              <dl>2017-11-15 10:35 2017-11-15 23:59</dl>
            </dl>
          </li>
          <li>
            <img src="../gulimall/product/item/img/shop_05.png"/>
            <dl class="buzhou">
              <dt>3.等待抢购</dt>
              <dl>抢购即将开始</dl>
            </dl>
          </li>
          <li>
            <img src="../gulimall/product/item/img/shop_06.png"/>
            <dl class="buzhou">
              <dt>4.抢购中</dt>
              <dl></dl>
            </dl>
          </li>
        </ul>
      </div>

      <div class="ShopXiangqing">
        <div class="allLeft">
          <!--火热预约-->
          <div class="huoreyuyue">
            <h3>火热预约</h3>
          </div>
          <div class="dangeshopxingqing">
            <ul class="shopdange">
              <li>
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/5a0afeddNb34732af.jpg"/></a>
                <p>
                  <a href="../gulimall/product/item/##">OPPO R11s Plus 双卡双待全面屏拍照手机香槟色 全网通(6G RAM+64G ROM)标配</a>
                </p>
                <p><strong class="J-p-20015341974">￥3699.00</strong></p>
              </li>
              <li>
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/5a12873eN41754123.jpg"/></a>
                <p>
                  <a target="_blank" title="詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）"
                     href="../gulimall/product/item/item.jd.com/20348283521.html">詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待
                    6+128GB 鳄鱼纹雅致版（新品预约）</a>
                </p>
                <p><strong class="J-p-20348283521">￥13999.00</strong></p>
              </li>
              <li>
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/59ec0131Nf239df75.jpg"/></a>
                <p>
                  <a target="_blank" title="斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60"
                     href="../gulimall/product/item/item.jd.com/16683419775.html">斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器
                    静音大吸力吸尘器TF-X60</a>
                </p>
                <p><strong class="J-p-16683419775">￥1599.00</strong></p>
              </li>
              <li>
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/59015444N27317512.jpg"/></a>
                <p>
                  <a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金"
                     href="../gulimall/product/item/item.jd.com/12187770381.html">斐纳（TOMEFON）
                    扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
                </p>
                <p><strong class="J-p-12187770381">￥2599.00</strong></p>
              </li>
            </ul>
          </div>
          <!--看了又看-->
          <div class="huoreyuyue">
            <h3>看了又看</h3>
          </div>
          <div class="dangeshopxingqing">
            <ul class="shopdange">
              <li>
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/59e55e01N369f98f2.jpg"/></a>
                <p>
                  <a target="_blank" title="华为（HUAWEI） 华为 Mate10 4G手机  双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)"
                     href="../gulimall/product/item/item.jd.com/17931625443.html">华为（HUAWEI） 华为 Mate10 4G手机 双卡双待 亮黑色
                    全网通(6GB RAM+128GB ROM)</a>
                <p><strong class="J-p-17931625443">￥4766.00</strong></p>
              </li>
              <li>
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/584fcc3eNdb0ab94c.jpg"/></a>
                <p>
                  <a target="_blank" title="华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待"
                     href="../gulimall/product/item/item.jd.com/3749093.html">华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机
                    双卡双待</a>
                </p>
                <p><strong class="J-p-3749093">￥4899.00</strong></p>
              </li>
              <li>
                <!--shopjieshao-->
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/59eb0df9Nd66d7585.jpg"/></a>
                <p>
                  <a target="_blank" title="华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版"
                     href="../gulimall/product/item/item.jd.com/12306211773.html">华为（HUAWEI） 华为 Mate10 手机 亮黑色
                    全网通(4+64G)标准版</a>
                </p>
                <p><strong class="J-p-12306211773">￥4088.00</strong></p>
              </li>
              <li>
                <a href="../gulimall/product/item/##"><img
                  src="../gulimall/product/item/img/5a002ba3N126c2f73.jpg"/></a>
                <p>
                  <a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金"
                     href="../gulimall/product/item/item.jd.com/12187770381.html">斐纳（TOMEFON）
                    扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
                </p>
                <p><strong class="J-p-12187770381">￥2599.00</strong></p>
              </li>
            </ul>
          </div>
        </div>
        <!--商品介绍-->
        <div class="allquanbushop">
          <ul class="shopjieshao">
            <li class="jieshoa" style="background: #e4393c;">
              <a href="../gulimall/product/item/##" style="color: white;">商品介绍</a>
            </li>
            <li class="baozhuang">
              <a href="../gulimall/product/item/##">规格与包装</a>
            </li>
            <li class="baozhang">
              <a href="../gulimall/product/item/##">售后保障</a>
            </li>
            <li class="pingjia">
              <a href="../gulimall/product/item/##">商品评价(4万+)</a>
            </li>
            <li class="shuoming">
              <a href="../gulimall/product/item/##">预约说明</a>
            </li>

          </ul>
          <button class="Lijiyuyuessss">
            立即预约
          </button>
          <ul class="shopjieshaos posi" style="display: none;">
            <li class="jieshoa" style="background: #e4393c;">
              <a href="../gulimall/product/item/#li1" style="color: white;">商品介绍</a>
            </li>
            <li class="baozhuang">
              <a href="../gulimall/product/item/#li2">规格与包装</a>
            </li>
            <li class="baozhang">
              <a href="../gulimall/product/item/#li3">售后保障</a>
            </li>
            <li class="pingjia">
              <a href="../gulimall/product/item/#li4">商品评价(4万+)</a>
            </li>
            <li class="shuoming">
              <a href="../gulimall/product/item/#li5">预约说明</a>
            </li>
          </ul>

          <!--商品详情-->
          <div class="huawei">
            <ul class="xuanxiangka">
              <li class="jieshoa actives" id="li1">
                <div class="shanpinsssss">

                  <img class="xiaoguo" th:src="${descp}"
                       th:each="descp : ${#strings.listSplit(item.desc.decript,',')}"/>

                </div>
              </li>
              <li class="baozhuang actives" id="li2">
              <li class="baozhuang actives" id="li2">
                <div class="guiGebox">
                  <div class="guiGe" th:each="group : ${item.groupAttrs}">
                    <h3 th:text="${group.groupName}">主体</h3>
                    <dl>
                      <div th:each="attr : ${group.attrs}">
                        <dt th:text="${attr.attrName}">品牌</dt>
                        <dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
                      </div>
                    </dl>
                  </div>
                  <div class="package-list">
                    <h3>包装清单</h3>
                    <p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X
                      1、取卡针 X 1、保护壳 X 1</p>
                  </div>
                </div>
              </li>
              <!--包装-->
              <li class="baozhang actives" id="li3">
                <div class="oBox">
                  <div class="shuoHou">
                    <div class="baoZhang">
                      <h2>售后保障</h2>
                    </div>
                  </div>
                  <!--厂家服务-->
                  <div class="changJia">
                    <div class="lianBao">
                      <span class="oImg">
                        <img src="../gulimall/product/item/img/2017.jpg" alt=""/>
                        <h3>厂家服务</h3>
                      </span>
                      <div class="wenZi">
                        本产品全国联保，享受三包服务，质保期为：一年保<br/>
                        如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在保质期内享受免费保修等安保服务！<br/>
                        (注：如厂家在商品介绍中有售后保障的说明，则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a
                        href="../gulimall/product/item/#">请点击这儿查询...</a><br/><br/>
                      </div>
                    </div>
                    <div class="lianBao oCn">
                      <span class="oImg">
                        <img src="../gulimall/product/item/img/2017.jpg" alt=""/>
                        <h3>谷粒承诺</h3>
                      </span>
                      <div class="wenZi">
                        本产品全国联保，享受三包服务，质保期为：一年保<br/>
                        如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在保质期内享受免费保修等安保服务！<br/>
                        (注：如厂家在商品介绍中有售后保障的说明，则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a
                        href="../gulimall/product/item/#">请点击这儿查询...</a><br/><br/><br/>
                      </div>
                    </div>

                    <div class="lianBao ">
                      <span class="oImg">
                        <img src="../gulimall/product/item/img/2017.jpg" alt=""/>
                        <h3>正品行货</h3>
                      </span>
                      <div class="wenZi hangHuo">
                        谷粒商城向您保证所售商品均为正品行货，谷粒自营商品开具机打发票或电子发票。
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="Fixedbian">
      <ul>
        <li class="li1"><a class="aaa" href="#">顶部</a></li>
      </ul>
    </div>

    <div class="gouwuchexiaguo">
      <img src="../gulimall/product/item/img/44.png"/>
      <span>购物车还没有商品，赶紧选购吧！</span>
    </div>
  </body>

  <script src="../gulimall/product/item/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
  <script src="../gulimall/product/item/js/js.js" type="text/javascript" charset="utf-8"></script>

  <script>
      $(".sku_attr_value").click(function () {
          // 1、点击的元素添加上自定义的属性
          let skus = new Array();
          let curr = $(this).attr("skus").split(",");

          $(this).parent().parent().find(".sku_attr_value").removeClass("checked");
          $(this).addClass("checked");
          changeCheckedStyle();

          $("a[class='sku_attr_value checked']").each(function () {
              skus.push($(this).attr("skus").split(","));
          });

          let filterEle = skus[0];
          for (let i = 1; i < skus.length; i++) {
              filterEle = $(filterEle).filter(skus[i])[0];
          }

          location.href = "http://localhost/item/" + filterEle + ".html";

          return false;
      });
      $(function () {
          changeCheckedStyle();
      });

      function changeCheckedStyle() {
          $(".sku_attr_value").parent().css({"border": "solid 1px #ccc"});
          $("a[class='sku_attr_value checked']").parent().css({"border": "solid 1px red"});
      };


      $(".addToCart").click(function () {
          let skuId = $(this).attr("skuId");
          let num = $("#productNum").val();
          location.href = "http://localhost/auth/addCartItem?skuId=" + skuId + "&num=" + num;
          return false;
      });

      $(".seckill").click(function () {
          var isLogin = [[${ session.loginUser != null }]];     //true
          if (isLogin) {
              var killId = $(this).attr("sessionid") + "-" + $(this).attr("skuid");
              var code = $(this).attr("code");
              var num = $("#productNum").val();
              location.href = "http://seckill.gulimall.com/kill?killId=" + killId + "&key=" + code + "&num=" + num;
          } else {
              alert("秒杀请先登录");
          }
          return false;
      });

  </script>

</html>